import Vue from 'vue'
import Vuex from 'vuex'
import release from './release'
Vue.use(Vuex)

// 持久化数据存储之后，
// store插件
const myPlugin = (store) => {
  // 当 store 初始化后调用
  store.subscribe((mutation, state) => {
    console.log(state, '---------state')
    // 一次存储relase发布模块的数据

    localStorage.setItem('draftHtmlArr', JSON.stringify(state.release.draftHtmlArr))
    localStorage.setItem('releaseHtmlArr', JSON.stringify(state.release.releaseHtmlArr))

    // 每次 mutation 之后调用
    // mutation 的格式为 { type, payload }
    localStorage.setItem('token', state.token)
    localStorage.setItem('collectArr', JSON.stringify(state.collectArr))
  })
}

export default new Vuex.Store({
  state: {
    token: localStorage.getItem('token') || '',
    collectArr: JSON.parse(localStorage.getItem('collectArr')) || [], // 车系收藏数组
    titleArr: [
      {
        id: 1,
        text: '智能排序',
        children: [
          {
            id: '1-1',
            title: '智能排序',
            name: 'id',
          },
          {
            id: '1-2',
            title: '最新上架',
            name: 'publishTime',
          },
          {
            id: '1-3',
            title: '价格最低',
            name: 'price',
          },
          {
            id: '1-4',
            title: '价格最高',
            name: 'price',
          },
          {
            id: '1-5',
            title: '距离最近',
            name: 'distance',
          },
          {
            id: '1-6',
            title: '车龄最短',
            name: 'carAge',
          },
          {
            id: '1-7',
            title: '里程最少',
            name: 'mileage',
          },
        ],
      },
      { id: 2, text: '品牌' },
      { id: 3, text: '价格' },
      { id: 4, text: '车龄/里程' },
      { id: 4, text: '筛选' },
    ],
    titleArr2: [
      {
        id: 1,
        text: '智能排序',
        children: [
          {
            id: '1-1',
            text: '智能排序',
            value: 'id',
          },
          {
            id: '1-2',
            text: '最新上架',
            value: 'publishTime',
          },
          {
            id: '1-3',
            text: '价格最低',
            value: 'price1',
          },
          {
            id: '1-4',
            text: '价格最高',
            value: 'price2',
          },
          {
            id: '1-5',
            text: '距离最近',
            value: 'distance',
          },
          {
            id: '1-6',
            text: '车龄最短',
            value: 'carAge',
          },
          {
            id: '1-7',
            text: '里程最少',
            value: 'mileage',
          },
        ],
      },
      { id: 2, text: '品牌' },
      { id: 3, text: '价格' },
      { id: 4, text: '车龄/里程' },
      { id: 4, text: '筛选' },
    ],
  },
  plugins: [myPlugin],
  getters: {
    allCount() {
      return 'allcount'
    },
  },
  mutations: {
    set_collect_arr(state, item) {
      // 是否收藏的判断
      item.collectFlag = !item.collectFlag
      // push // 删除
      if (item.collectFlag) {
        // 如果收藏状态为true，就push到数组中，去除重复
        if (state.collectArr.findIndex((v) => v.id === item.id) === -1) {
          state.collectArr.push(item)
        }
      } else {
        state.collectArr.splice(
          state.collectArr.findIndex((v) => v.id === item.id),
          1
        )
      }
      console.log('state.collectArr:', state.collectArr)
    },
    set_token(state, token) {
      state.token = token
    },
  },
  actions: {},
  modules: {
    // 模块化注入release模块
    release,
  },
})
